<!DOCTYPE html>
<html style="height: 100%">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;padding:0;
			}
			p{
				width:24.3vw;
				height:13.4vh;
				line-height: 13.4vh;
				font-size:12px;
				color: #fff;
				margin-left:4.2vw;
				font-family:'微软雅黑';
			}
		</style>
	</head>
	<body>
		<p>设备运行实时数量</p>
		<!-- <p>Number --quantity</p> -->
		<div id="container" style="height:71.3vh;width: 100vw;position: absolute; right:0vw; bottom:5vh"></div>
		<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
		<script src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript">
			var max = -Infinity;
			var min = Infinity;
      var option = {
            grid: {
                left: '5%', //图表距边框的距离
                right: '6%',
                bottom: '2%',
                top: '5%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                // data: [],
				// data: ['9:00', '10:00','10:00','10:00', '10:00', '10:00', '10:00', '10:00','10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
				data:[],
                boundaryGap: false, //取消左侧的间距
                axisLine: {
                    lineStyle: {
                        color: '#2a51a0'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#0abdff',
                        fontSize: '12'
                    }
                },
            },
            yAxis: {
				splitLine:{show: false},
// 				min:0,
// 				max:400,
				min:0,
				// max:200,
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false//横轴的线
                },
                axisLine: {
                    lineStyle: {
                        color: '#2a51a0'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize: '12'
                    },
                },
                // splitNumber: 5,//y轴分为几个刻度线
				  splitNumber: 5,//y轴分为几个刻度线
            },

            series: [{
                name: '模拟数据',
                type: 'line',
                showSymbol: true,
                hoverAnimation: false,
                // data: data,
					// data: [20,50, 60, 60, 80, 120, 110, 108,177,79,158,140,100,200],
					data:[],
                smooth: true,
				itemStyle: {//改变圆点的状态
						normal: {
						   color: "#087bd8",//曲线上点的颜色改变
							borderColor: '#fff',//圆点的颜色
							// backgroundColor:'#fff',
							borderWidth: 2,//圆点的宽度
						},
				}, 
                color: ['#008efe'], //折线条的颜色
                symbol: 'circle', // 拐点样式是实心圆
                symbolSize: 10, // 拐点圆的大小
                areaStyle: {
                    normal: {
                        color: {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                    offset: 0,
                                    color: "#008efe " // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "#071134" // 100% 处的颜色
                                }
                            ],
                            globalCoord: false // 缺省为 false
                        }
                    }
                },
                label: { // 是否显示拐点位置的数据
                    normal: {
                        show: true,
                        position: 'top',
                        color: '#fff'
                    }
                },
            }]
        };


	$(function () { 
	           //初始化数据
	           initData();
	           setInterval(initData, 10000);
	});

  var dom = document.getElementById("container");
        var gb = {
            chart: echarts.init(dom)
        };

        function disposeAndRun() {
            if (gb.chart) {
                gb.chart.dispose();
            }
            gb.chart = null;
            run(true);
        }
        var run = function (df) {
            if (!gb.chart) {
                gb.chart = echarts.init(dom);
            }
            if (option && typeof option === 'object') {
                gb.chart.setOption(option, true);
            }
        }
function initData() {
        $.ajax({
            type : "get",
            async : false, //同步执行
            url : "http://192.168.1.27:8080/MetisManage/dataAuth/findDeviceRealTime",
            // dataType : "json", //返回数据形式为json
            success : function(result) {
				// console.log(result,'ojkooo')
                if(result){
                    //初始化option.xAxis[0]中的data
                    option.xAxis.data=[];
					    option.series[0].data=[];
                    for(var i=0;i<result.records.length;i++){
						// console.log(result.records[i],'ojkooo')
                      option.xAxis.data.push(result.records[i].time);
					  option.series[0].data.push(result.records[i].num);
						disposeAndRun();
                    }
					
                }
            }
        })
		 
}

 var myChart = echarts.init(document.getElementById("container"));
        myChart.setOption(option);
      
    </script>
	</body>
</html>
